@import 'mo/style/common';

#{$input} {
    background-color: var(--input-background);
    border: 1px solid transparent;
    border-color: var(--input-border);
    color: var(--input-foreground);
    display: inline-block;
    font-size: 13px;
    min-width: 0;
    padding: 4px 11px;
    position: relative;
    transition: all 0.3s;
    width: calc(100% - 16px);

    &--lg {
        font-size: 16px;
        height: 40px;
        padding: 6px 11px;
    }

    &--disabled {
        background-color: var(--input-background);
        color: var(--input-foreground);
        cursor: not-allowed;
        opacity: 1;
    }

    &__textarea {
        &--show-count::after {
            color: var(--input-foreground);
            content: attr(data-count);
            display: block;
            text-align: right;
        }
    }

    &::placeholder {
        color: var(--input-placeholderForeground);
    }

    &:focus,
    &:active {
        border-color: var(--focusBorder);
        outline-color: var(--focusBorder);
        outline-offset: -1;
        outline-style: solid;
    }
}
